<template>
  <div class="user-balance views-container">
    <el-dialog @close="clearBalance" :visible.sync="rechargedialog" custom-class="reset-pwd wlm-form-dialog dialog-table">
      <div class="wlm-form" v-if="rechargedialog">
        <div class="wlm-form-header wlm-dialog-fixheader">
          <span class="wlm-dialog-inlenr">充值余额</span>
        </div>
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <div class="wlm-form-content">
            <div class="wlm-dialog-main">
              <div class="wlm-dialog-content">
                <el-form ref="userForm" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                  <el-form-item :label="classdata==1?'积分':'余额'" prop="name">
                    <el-input v-model="update_money" :placeholder="classdata==1?'填入负数则为减少积分':'填入负数则为减少余额'" style="width:200px;"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="name">
                    <el-input v-model="update_explain" placeholder="调整说明..." style="width:200px;"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <footer class="flex-row flex-align-c flex-justify-c wlm-dialog-fixfooter">
        <el-button size="small" type="primary" @click="saveBalanceChange">确定</el-button>
      </footer>
    </el-dialog>
    <div class="wlm-table">
      <div class="wlm-table-header">
        <el-form :model="tableFormatData.userTable.files" size="small" label-width="90px" class="retail-form" label-position="right">
          <el-form-item label class="filter">
            <el-form-item label="用户：">
              <el-input @keyup.enter.native="filesSerch" v-model="tableFormatData.userTable.files.nickName" placeholder="搜索用户昵称和充值金额" style="width:350px;"></el-input>
            </el-form-item>
            <el-form-item label="充值状态：">
              <el-select v-model="tableFormatData.userTable.files.status" placeholder="请选择" style="width:200px;">
                <el-option :label="tableFormatData.userTable.files.classs=='1'?'未到账':'未支付'" :value="1"></el-option>
                <el-option :label="tableFormatData.userTable.files.classs=='1'?'已到账':'已支付'" :value="2"></el-option>
                <el-option :label="tableFormatData.userTable.files.classs=='1'?'已退还':'已退款'" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-form-item>
          <el-form-item label class="filter-btns">
            <el-button type="primary" @click="filesSerch">筛选</el-button>
            <el-button plain icon="document" :data-query="JSON.stringify(tableFormatData.userTable.files)" v-exceldown="{path:'balanceOrders&',query: {export:1}}">{{$t('excel.export') }}</el-button>
            <el-button type="text" @click="filesEmpty">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-tabs v-model="tableFormatData.userTable.files.classs" type="card" @tab-click="filesSerch">
          <el-tab-pane label="充值记录" name="0"></el-tab-pane>
          <el-tab-pane label="积分明细" name="1"></el-tab-pane>
          <el-tab-pane label="余额明细" name="2"></el-tab-pane>
        </el-tabs>
        <el-table :ref="tableFormatData.userTable.key" v-loading="!isTableFormatGetEnd" :data="tableFormatData.userTable.tableData" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column prop="date" label="用户">
            <template slot-scope="scope">
              <div class="flex-row">
                <img class="logo" v-if="scope.row.avatarUrl" :src="scope.row.avatarUrl" />
                <div class="inner-text">
                  <p>{{scope.row.nickName}}</p>
                  <el-tooltip class="item" effect="dark" :content="sourceType[`${scope.row.source}`]" placement="top">
                    <img height="20" width="20" :src="sourceImg[`${scope.row.source || '--'}`]" alt />
                  </el-tooltip>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="支付金额" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <p>{{scope.row.pay_price}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="支付方式" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <p>{{payType[`${scope.row.pay_type}`]}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="充值类型" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <p>{{scope.row.classs=='1'?'积分':'余额'}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="到账余额" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <p>{{scope.row.update_money}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="时间" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <span>{{scope.row.create_time}}</span>
            </template>
          </el-table-column>
            <el-table-column prop="date" label="操作员" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <span>{{scope.row.real_name||'-'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="状态" v-if="tableFormatData.userTable.files.classs!=1">
            <template slot-scope="scope">
              <div class="flex-col flex-justify-c">
                <p v-if="scope.row.status==1">未支付</p>
                <p v-if="scope.row.status==2">已支付</p>
                <p v-if="scope.row.status==3">已退款</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="状态" v-if="tableFormatData.userTable.files.classs==1">
            <template slot-scope="scope">
              <p v-if="scope.row.status==1">未到账</p>
              <p v-if="scope.row.status==2&&scope.row.types!=2">已到账</p>
              <p v-if="scope.row.status==3">已退还</p>
              <p v-if="scope.row.status==2&&scope.row.types==2">已使用</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="消费类型" v-if="tableFormatData.userTable.files.classs!=0">
            <template slot-scope="scope">
              <p v-if="scope.row.types==1">充值</p>
              <p v-if="scope.row.types==2">消费</p>
              <p v-if="scope.row.types==3">赠送</p>
              <p v-if="scope.row.types==4">免单返现</p>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="变更" v-if="tableFormatData.userTable.files.classs!=0">
            <template slot-scope="scope">
              <span>{{scope.row.update_money}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="变更时间" v-if="tableFormatData.userTable.files.classs!=0">
            <template slot-scope="scope">
              <span>{{scope.row.create_time}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作详情" v-if="tableFormatData.userTable.files.classs!=0">
            <template slot-scope="scope">
              <span>{{scope.row.explain}}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" prop="address" label="操作" v-if="tableFormatData.userTable.files.classs==0">
            <template slot-scope="scope">
              <div class="operation-group">
                <el-button v-if="scope.row.status==2&&scope.row.classs==2&&scope.row.types==1&&scope.row.is_refund_balance!=1" class="wlm-text" type="text" @click="czRefund(scope.row.balance_order_id)">退款</el-button>
                <div v-if="scope.row.status==2&&scope.row.classs==2&&scope.row.types==1 &&scope.row.is_refund_balance!=1" class="btn-line"></div>
                <el-button class="wlm-text" type="text" @click="balanceChange(scope.row.user_id,scope.row.classs)">继续充值</el-button>
                <!-- <div class="btn-line"></div>
                <el-button class="wlm-text" type="text" @click="delTableItem(scope.row.id)">删除</el-button>-->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.userTable.pagination.page"
            :page-sizes="tableFormatData.userTable.pagination.pagesizes"
            :page-size.sync="tableFormatData.userTable.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.userTable.pagination.total : 0"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  balanceOrders,
  refund,
  recharge
} from '@/api/user'
import mixins from '@/mixins/mixins'
import exceldown from '@/directive/exceldown'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'UserBalance',
  components: {

  },
  directives: {
    exceldown
  },
  computed: {

  },
  data() {
    return {
      update_money: '',
      update_explain: '',
      classdata:'',
      sourceType: {
        '1': '导入',
        '2': '微信小程序',
        '3': 'H5',
        '4': '公众号',
        '5': '安卓',
        '6': '苹果',
        '7': '支付宝小程序',
        '8': '百度小程序',
        '9': '头条小程序',
        '-': '-'
      },
      payType: {
        'wechat': '微信',
        'admin': '后台确认',
        'alipay': '支付宝',
        'blance': '余额',
        'zero': '零元',
        '-': '-'
      },
      linkDetailType: {
        '4': 'ordersCardPasswordManagementDetail',
        '3': '/orders/ordersVerificationManagementDetail',
        '2': '/orders/ordersComeStoreManagementDetail',
        '1': '/orders/ordersExpressManagementDetail'
      },
      rechargedialog: false,
      value: '',
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: balanceOrders,
            delList: balanceOrders
          },
          tableData: [],
          files: {
            nickName: '',
            status: '',
            classs: '0',
            time: [],
            ids: [],
            checkall: '0',
            Recycle: '0'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'rechargedialog'
        },
        api: {
          editForm: {
            api: balanceOrders,
            params: {
              id: ''
            }
          },
          submitForm: balanceOrders
        },
        formData: {
          id: '',
          total_money: '',
          first_money: '',
          second_money: '',
          third_money: '',
          first_user_nickName: '',
          first_user_avatarUrl: '',
          second_user_nickName: '',
          second_user_avatarUrl: '',
          third_user_nickName: '',
          third_user_avatarUrl: '',
          first_user_id: '',
          second_user_id: '',
          third_user_id: ''
        },
        rules: {}
      }
    }
  },
  methods: {
    clearBalance() {
      this.update_money = ''
      this.update_explain = ''
      this.update_user_id = ''
    },
    balanceChange(user_id,classs) {
      this.update_user_id = user_id
      this.classdata =classs

      this.rechargedialog = true
    },
    saveBalanceChange() {
      recharge({ class: this.classdata, update_money: this.update_money, explain: this.update_explain, user_id: this.update_user_id }).then(res => {
        const { data: { code, msg } } = res
        if (code === 1) {
          this.$message.success(msg)
        }
      })
      this.rechargedialog = false
      this.filesSerch()
    },
    czRefund(id) {
      refund({ balance_order_id: id }).then(res => {
        const { data: { code, msg } } = res
        if (code === 1) {
          this.$message.success(msg)
        }
      })
      this.filesSerch()
    }
  }
}
</script>

<style lang="scss" scoped>
.user-balance {
  /deep/ .is-left.no-column .cell {
    display: none !important;
  }

  .logo {
    height: 38px;
    width: 38px;
    border-radius: 38px;
    vertical-align: middle;
  }

  /deep/ .el-table__body tr:hover > td {
    background-color: transparent !important;
  }

  .goods-list:nth-of-type(1) {
    padding-top: 48px;
  }

  & .orders-red {
    color: rgb(245, 108, 108);
  }

  /deep/ .no-bor {
    border-right: none;
  }

  .dialog-card {
    margin-left: 40px;
    padding: 10px 36px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.7;
    background: #f2f2f2;
    border-radius: 6px;
    width: auto;
    border: 1px solid #dddddd;
  }

  .opacity-0 {
    opacity: 0;
  }
}
</style>
